<%layout("/common/g_layout.html"){%>

<nav class="navbar navbar-default group">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="../group/group.html">设团小组</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="">精选</a>
                </li>
                <li>
                    <a href="">精选</a>
                </li>
                <li>
                    <a href="">精选</a>
                </li>
                <li>
                    <a href="">精选</a>
                </li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="小组、话题">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button">搜索</button>
						</span>
                </div>
            </form>
        </div>
    </div>
</nav>
<div class="container gr">
    <div class="row">
        <h2>欢迎来到设团小组，里昂</h2>
    </div>
    <div class="row pre-title-desc">
        <p>加入一些小组来定制你的小组首页。我们为你推荐了一些，按分类选择你感兴趣的加入，试试看！</p>
    </div>
    <div class="row pre-tabs">
        <div class="col-md-1 pre-tab-ani pre-curtab">
            <p class="pre-tab">动漫</p>
            <p class="pre-desc-tab">海贼王&nbsp;数码宝贝&nbsp;魁拔...</p>
            <div class="out-tri"></div>
            <div class="in-tri"></div>
        </div>
        <div class="col-md-1 pre-tab-game">
            <p class="pre-tab">游戏</p>
            <p class="pre-desc-tab">LOL&nbsp;DNF&nbsp;穿越火线...</p>
        </div>
        <div class="col-md-1 pre-tab-ani">
            <p class="pre-tab">动漫</p>
            <p class="pre-desc-tab">海贼王&nbsp;数码宝贝&nbsp;魁拔...</p>
        </div>

    </div>
    <div class="clearfix row pre-list pre-list-cur pre-ani">
        <%
        for(p in page1.list){
        %>
        <div class="pre-single">
            <img src="${p.imageurl}" alt="驯龙记" data-groupId="${p.id}"/>
            <p><a href="">${p.name}</a></p>
            <p><span class="glyphicon glyphicon-user"></span> <span>${p.num}人</span></p>
            <p class="pre-join">+加入小组</p>
        </div>
        <%}%>

    </div>
    <div class="clearfix row pre-list pre-game">
        <%
        for(p in page2.list){
        %>
        <div class="pre-single">
            <img src="${p.imageurl}" alt="LOL" />
            <p><a href="">${p.name}</a></p>
            <p><span class="glyphicon glyphicon-user"></span> <span>${p.num}人</span></p>
            <p class="pre-join">+加入小组</p>
        </div>
        <%}%>

    </div>
    <div class="row pre-stadata-groupId="groupId1"tu">
    <p class="pull-left pre-joined">已加入<span class="pre-joined-num">0个小组</span></p>
    <form action="/group/addGroupsall" method="post">
        <input type="hidden" name="groupSelect" id="groupSelect">
        <input type="hidden" name="userId" value="">
        <button class="btn btn-info pull-right" type="submit">完成，进入我的小组</button>
    </form>
</div>
</div>


<%include("/common/footer.html"){}%>

<script src="${ctxPath}/group/js/scripts/jquery-2.1.1.min.js"></script>
<script src="${ctxPath}/group/js/scripts/pregroup.js"></script>
<script src="${ctxPath}/group/js/scripts/nav.js"></script>


<%}%>